<script setup lang="ts"></script>

<template>
  <div class="ai-help">
    <el-popover
      placement="top-start"
      :width="200"
      trigger="hover"
      style="font-size: 14px"
      content="Hello，我是你的AI助手小C 🤩，请问我能帮你什么？"
    >
      <template #reference>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          xmlns:serif="http://www.serif.com/"
          width="100%"
          height="100%"
          viewBox="0 0 1000 1000"
          version="1.1"
          xml:space="preserve"
          style="
            fill-rule: evenodd;
            clip-rule: evenodd;
            stroke-linecap: round;
            stroke-linejoin: round;
            stroke-miterlimit: 1.5;
          "
        >
          <path
            d="M372.918,463.714C372.918,463.714 479.867,530.769 640.292,462.865C640.292,462.865 701.406,596.127 664.907,693.74C664.907,693.74 526.552,742.122 340.663,692.891C340.663,692.891 289.735,605.464 372.918,463.714Z"
            style="fill: white"
          />
          <g id="body-left" transform="matrix(1,0,0,1,29.5659,-40.7626)">
            <path
              d="M346.139,505.26C346.139,505.26 267.143,616.958 308.653,734.477"
              style="fill: none; stroke: rgb(51, 51, 51); stroke-width: 13.02px"
            />
            <g transform="matrix(1,0,0,1,-29.5659,40.7626)">
              <path
                d="M338.219,693.714C338.219,693.714 469.665,738.532 664.134,694.03"
                style="fill: none; stroke: rgb(51, 51, 51); stroke-width: 13px"
              />
            </g>
          </g>
          <g id="body-right" transform="matrix(-1,0,0,1,977.464,-46.9653)">
            <path
              d="M347.252,504.62C347.252,504.62 269.728,622.773 311.238,740.292"
              style="fill: none; stroke: rgb(51, 51, 51); stroke-width: 13.02px"
            />
          </g>
          <g id="head" transform="matrix(1,0,0,1,9.46463,12.304)">
            <g transform="matrix(1,0,0,1,0.521881,-75.3254)">
              <path
                d="M560.944,304.735C601.579,274.907 648.57,264.534 693.774,288.983C720.028,303.182 739.245,333.401 740.513,364.002C741.457,386.779 740.605,403.241 725.831,420.29C710.178,438.352 689.028,446.424 667.407,455.502C665.02,464.943 661.474,474.088 657.59,483.018C637.894,528.298 590.94,542.493 545.894,550.012C502.587,557.24 458.077,559.291 415.199,547.907C378.587,538.187 341.73,519.573 326.02,482.787C324.062,478.203 321.145,461.889 321.066,457.015C300.811,449.209 272.181,437.659 257.302,420.909C251.941,414.875 245.551,403.88 243.063,397.457C229.57,362.621 240.126,329.877 271.516,298.932C307.134,263.818 382.814,273.516 420.574,304.3C467.92,286.406 513.573,284.848 560.944,304.735Z"
                style="fill: white; stroke: rgb(51, 51, 51); stroke-width: 13.02px"
              />
            </g>
            <g id="eye-right">
              <g transform="matrix(1,0,0,1,138.111,-68.059)">
                <path
                  d="M398.886,423.23C398.886,423.23 406.847,433.569 414.103,423.996C413.819,424.245 420.071,415.838 411.847,407.851C396.176,415.73 398.006,431.571 398.006,431.571C401.115,458.4 420.018,454.985 420.018,454.985C428.893,454.429 433.724,448.28 436.338,443.428C439.164,438.18 439.395,434.085 439.338,430.139C439.17,418.445 430.018,410.534 430.018,410.534C422.152,404.253 411.847,407.851 411.847,407.851"
                  style="fill: rgb(51, 51, 51); stroke: rgb(51, 51, 51); stroke-width: 1px"
                />
              </g>
              <g transform="matrix(1,0,0,1,137.018,-0.00657648)">
                <path
                  d="M412.845,340.408L400.539,355.057L399.71,354.223C401.393,347.956 404.536,342.349 411.768,339.847"
                  style="fill: white"
                />
              </g>
            </g>
            <g id="eye-left">
              <g transform="matrix(1,0,0,1,1.09334,-68.059)">
                <path
                  d="M398.886,423.23C398.886,423.23 406.847,433.569 414.103,423.996C413.819,424.245 420.071,415.838 411.847,407.851C396.176,415.73 398.006,431.571 398.006,431.571C401.115,458.4 420.018,454.985 420.018,454.985C428.893,454.429 433.724,448.28 436.338,443.428C439.164,438.18 439.395,434.085 439.338,430.139C439.17,418.445 430.018,410.534 430.018,410.534C422.152,404.253 411.847,407.851 411.847,407.851"
                  style="fill: rgb(51, 51, 51); stroke: rgb(51, 51, 51); stroke-width: 1.01px"
                />
              </g>
              <path
                d="M412.845,340.408L400.539,355.057L399.71,354.223C401.596,347.951 405.573,342.602 411.768,339.847"
                style="fill: white"
              />
            </g>
            <g id="node" transform="matrix(1,0,0,1,1.70307,-67.6931)">
              <path
                d="M490.648,493.142C490.648,493.142 457.153,499.422 450.175,468.486C450.175,468.486 465.759,390.173 488.555,389.243C488.555,389.243 509.859,395.994 524.141,467.652C524.141,467.652 522.632,493.492 490.648,493.142Z"
                style="fill: rgb(91, 91, 91); stroke: rgb(51, 51, 51); stroke-width: 13.02px"
              />
            </g>
            <g id="mouth" transform="matrix(1,0,0,1,0.976184,-68.0565)">
              <path
                d="M546.919,506.08C531.791,545.341 490.888,516.74 490.888,516.74C490.888,516.74 450.964,542.763 431.548,505.782"
                style="fill: none; stroke: rgb(51, 51, 51); stroke-width: 13.02px"
              />
            </g>
            <g id="ear-left" transform="matrix(1,0,0,1,0.976184,-68.0565)">
              <path
                d="M327.174,419.834C312.924,409.869 303.291,394.397 301.943,369.047C290.307,370.749 283.439,378.49 279.247,389.621C279.266,370.679 284.54,353.345 308.905,341.855C296.452,339.513 284.935,342.789 273.971,349.379C283.937,333.275 301.908,321.472 345.151,323.248C339.391,314.918 323.132,312.018 302.974,311.135C328.646,304.257 354.672,302.15 382.334,322.125C348.399,353.93 330.84,386.54 327.174,419.834Z"
                style="fill: rgb(51, 51, 51)"
              />
            </g>
            <g id="ear-right" transform="matrix(-1,0,0,1,971.318,-68.0565)">
              <path
                d="M327.174,419.834C312.924,409.869 303.291,394.397 301.943,369.047C290.307,370.749 283.439,378.49 279.247,389.621C279.266,370.679 284.54,353.345 308.905,341.855C296.452,339.513 284.935,342.789 273.971,349.379C283.937,333.275 301.908,321.472 345.151,323.248C339.391,314.918 323.132,312.018 302.974,311.135C328.646,304.257 354.672,302.15 382.334,322.125C348.399,353.93 330.84,386.54 327.174,419.834Z"
                style="fill: rgb(51, 51, 51)"
              />
            </g>
          </g>
          <g id="hand-right" transform="matrix(1,0,0,-1,187.641,1066.14)">
            <path
              class="hand-l"
              d="M372.081,558.295C372.081,558.295 399.226,468.413 393.694,430.365C389.806,403.627 432.78,397.208 434.356,434.889C442.877,508.072 411.248,565.215 405.398,566.677"
              style="fill: white; stroke: rgb(51, 51, 51); stroke-width: 12.92px"
            />
            <g transform="matrix(-1,0,0,1,623.184,2.27374e-13)">
              <path
                class="hand-r"
                d="M372.081,558.295C372.081,558.295 399.226,468.413 393.694,430.365C389.806,403.627 432.78,397.208 434.356,434.889C442.877,508.072 411.248,565.215 405.398,566.677"
                style="fill: white; stroke: rgb(51, 51, 51); stroke-width: 12.92px"
              />
            </g>
          </g>
        </svg>
      </template>
    </el-popover>
  </div>
</template>

<style lang="scss" scoped>
:root {
  --path: 0;
}

.ai-help {
  right: 10px;
  bottom: 80px;
  z-index: 1;
  position: absolute;
  font-size: 60px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  cursor: pointer;

  svg {
    .hand-r,
    .hand-l {
      transition: d 1s ease;
    }
    #head {
      transition: transform 1s ease;
    }

    &:hover {
      #head {
        transform: translate(10px, 20px);
      }

      .hand-r {
        d: path(
          'M372.081,558.295C372.081,558.295 375.15,623.803 365.213,659.696C347.806,722.57 391.107,727.15 405.875,664.22C415.222,624.386 408.661,566.677 408.661,566.677'
        );
      }

      .hand-l {
        d: path(
          'M372.081,558.295C372.081,558.295 374.033,625.408 361.554,661.775C347.078,703.959 376.84,740.247 402.216,666.299C417.659,631.688 408.661,566.677 408.661,566.677'
        );
      }
    }
  }
}
</style>
